<template>
	<div style="margin-top: 1.25rem;">
		<van-tabs v-model="active">
			<van-tab title="快捷登录">
				<van-row>
					<van-col span="21" offset="3" style="margin-top: 1.25rem;">
						<van-cell-group>
							<van-field v-model="value" label="" placeholder="请输入手机号" />
						</van-cell-group>
					</van-col>
					<van-col span="21" offset="3" style="margin-top: 0.9375rem;">
						<van-field v-model="sms" center clearable label="" placeholder="请输入短信验证码">
							<template #button>
								<van-button size="small" type="primary">发送验证码</van-button>
							</template>
						</van-field>
					</van-col>
				</van-row>
				<button type="button" class="button" @click="button">登录</button>
				<van-row style="margin-top: 12.125rem;">
					<van-col span="6" offset="4">
						<img src="http://img2.3png.com/2b3433a354192c978acbc99074e295c26077.png"
							style="width: 4.5rem;height: 4.5rem;"/>
					</van-col>
					<van-col span="5">
						<img src="http://img2.3png.com/93f54c401ebdbde2b56b129b6d77ae59b013.png" style="margin-top: 9px;width: 3.5rem;height: 3.5rem;"/>
					</van-col>
					<van-col span="4">
						<img src="http://img2.3png.com/d601fff6637a8ca78bb04d881faa9c9b338b.png" style="margin-top: 9px;width: 3.5rem;height: 3.5rem;"/>
					</van-col>
				</van-row>
				
			</van-tab>
			<van-tab title="账号登录">
				2
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import { Notify } from 'vant';
	export default {
		 components: {
		    [Notify.Component.name]: Notify.Component,
		  },
		data() {
			return {
				active: 2,
				value: '',
				sms: '',
				user:[]
			};
		},
		methods:{
			button(){
				console.log(this.value,this.sms);
				let value = this.value
				this.$store.dispatch('user/vuexMobilePhoneLogin',value)
				.then(e => {
					console.log(e)
					this.user = e.data.data
					if(e.data.data!=null){
						this.$router.push('/UserMine')
						localStorage.setItem("user", JSON.stringify(e.data.data)); 
					}else{
						Notify('发生了不得了的事情呢!');
					}
				})
			}
		}
	};
</script>

<style>
	.button {
		width: 90%;
		margin-left: 5%;
		height: 2.5rem;
		text-align: center;
		line-height: 2.5rem;
		background-color: #000;
		color: #fff;
		border: 0;
		margin-top: 2.5rem;
	}
</style>
